<template>
  <div class="p-6px">
    <el-descriptions title="基础信息" border style="margin-bottom: 10px">
      <el-descriptions-item label="订单号">{{ info?.order_no }}<div>[{{ info?.type_text }}]</div></el-descriptions-item>
      <el-descriptions-item label="购买人">
        <div style="display:flex;">
          <div style="margin-top:20px">
            <div>昵称: {{ info?.user.nickname }}</div>
            <div>ID: {{ info?.user.id }}</div>
          </div>
          <div style="margin-left:20px">
            <el-image class="rounded-full w-72px h-72px" :preview-teleported="true"
              :preview-src-list="info?.user.avatar" :src="info?.user.avatar != null && info?.user.avatar !== ''
                ? info?.user.avatar
                : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                ">
            </el-image>
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="实际支付">{{ info?.pay_price }}</el-descriptions-item>
      <el-descriptions-item label="订单状态"><el-tag>{{ info?.status_text }}</el-tag></el-descriptions-item>
      <el-descriptions-item label="支付状态"><el-tag>{{ info?.pay_status_text }}</el-tag></el-descriptions-item>

      <el-descriptions-item label="支付方式"><el-tag>{{ info?.pay_way_text }}</el-tag></el-descriptions-item>
      <el-descriptions-item label="支付时间">{{ info?.pay_time }}</el-descriptions-item>
      <el-descriptions-item label="下单时间">{{ info?.create_time }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="收货地址" border style="margin-bottom: 10px">
      <el-descriptions-item label="收货人">{{ info?.address.user_name }}</el-descriptions-item>
      <el-descriptions-item label="收货人手机号">{{ info?.address.phone }}</el-descriptions-item>
      <el-descriptions-item label="收货地址邮编">{{ info?.address.post_code }}</el-descriptions-item>
      <el-descriptions-item label="收货地址">
        <div>
          {{ info?.address?.province }}/
          {{ info?.address.city }}/{{ info?.address?.county }}/{{ info?.address?.street }}
          {{ info?.address?.detail }}
        </div>
      </el-descriptions-item>
    </el-descriptions>


    <el-table :data="info?.detail" stripe style="width: 100%" :editable="true" border>
      <el-table-column prop="sku_name" label="规格" width="150px" align="center"></el-table-column>
      <el-table-column prop="image" label="图片" width="100px" align="center">
        <template #default="scope">
          <el-image class=" w-72px h-72px" :preview-teleported="true" :preview-src-list="[scope.row.image]" :src="scope.row.logo != null && scope.row.logo !== ''
            ? scope.row.logo
            : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
            ">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="goods_name" label="商品名称" width="300px" align="center"> </el-table-column>
      <el-table-column prop="sku_name" label="规格名称" width="120px" align="center"> </el-table-column>
      <el-table-column prop="price" label="金额" width="120px" align="center"> </el-table-column>
      <el-table-column prop="num" label="数量" width="120px" align="center"> </el-table-column>
      <el-table-column prop="coupon_amount" label="卡券平摊" width="120px" align="center"> </el-table-column>
      <el-table-column prop="refunded_flag" label="是否退款" width="120px" align="center">
        <template #default="scope">{{ scope.row.refunded_flag=1 ? "否" : "是" }}</template>
      </el-table-column>
      <el-table-column prop="refunded_num" label="退款数量" width="120px" align="center"> </el-table-column>
      <el-table-column prop="refunded_price" label="退款金额" align="center"> </el-table-column>
    </el-table>

  </div>
</template>

<script setup lang="ts">

interface IDrawerProps {
  info: any;
}

withDefaults(defineProps<IDrawerProps>(), {
  info: {}
});


</script>

<style lang="scss" scoped></style>
